<template>
	<view class="backlog-declare-detail" v-if="Object.keys(appealInfo).length > 0">
		<l-file ref="lFile"></l-file>
		<!-- 顶部背景图区域 -->
		<u-image class="bg-image" width="100%" height="283rpx" src="@/static/image/home/data_statistics/bg.png">
		</u-image>
		<!-- <view class="item1">
			<title-tools :title="appealInfo.enterprise_name" fontSize="30rpx"></title-tools>
			<view class="content">
				{{appealInfo.content}}
			</view>
			<view class="img-wrap" v-if="appealInfo.material_files">
				<u-image class="img" v-for="(item,index) in appealInfo.imgArr" :key="index" @click="previewImage(item)"
					width="200rpx" height="200rpx" border-radius="10rpx" :src="item"></u-image>
			</view>
		</view> -->
		<view class="card">
			<view class="flex align_center marbot16">
				<view class="flex_1" style="margin-right: 24rpx;">
					<view class="flex align_center marbot16">
						<view class="tip" style="margin-right: 12rpx;">{{appealInfo.appear_type}}</view>
						<view class="tip">{{appealInfo.is_solve == 1?'未处理':appealInfo.is_solve == 2?'已处理':'办理中'}}</view>
					</view>
					<view class=" bold " style="font-size: 32rpx;">{{appealInfo.title}}</view>
				</view>
				<!-- <view :class="aisuss?'aiBut_act':'aiBut_not'" @click="aisuss?handleAijianyi():''" >AI建议</view> -->
			</view>
			<view class="marbot16 heis">{{appealInfo.createtime}}</view>
			<view class="line marbot16"></view>
			<!-- 普通展示 -->
			<view class="heis martop16">{{appealInfo.content}}</view>
			<!-- 九宫布局图片 -->
			<view class="flex flex_wrap martop16">
				<view class="relative" style="width: calc((100% / 3) - 20rpx);margin: 10rpx;height: 0;padding-bottom: calc((100% / 3) - 20rpx);" v-for="(iten,ind) in appealInfo.material_files" :key='iten'>
					<image :src="iten.url" mode="aspectFill" style="width: 100%;height: 100%;display: block;position:  absolute;top:0;left: 0;border-radius: 8rpx;" @click.stop="handleImg(iten.url)" v-if="iten.type == 'img'"></image>
					<video @click.stop="handleVideo(iten.url)" :src="iten.url" :controls='false' :show-fullscreen-btn='false' :show-center-play-btn='false' :show-play-btn='false' v-if="iten.type == 'video'" style="width: 100%;height: 100%;position: absolute;"></video>
				</view>
			</view>
			<!-- 语音展示 -->
			<view class="yuyinBox shodow flex align_center martop16" style="width: 60%;" v-if="appealInfo.voice_file" @click.stop="handleYuyinPaly(appealInfo)">
				<view class="" style="margin-right: 10rpx;">
					<image src="/static/image/yuyin_no.png" mode="" style="width: 28rpx;height: 28rpx;display: block;" v-if="!appealInfo.flag"></image>
					<image src="/static/image/yuyin_act.gif" mode="" style="width: 28rpx;height: 28rpx;display: block;" v-if="appealInfo.flag"></image>
				</view>
				<view class="">{{appealInfo.voice_time}}</view>
			</view>
		</view>
		
		<view class="box">
			<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="change"></u-tabs>
			<view class="line"></view>
			<!-- <schedule v-if="current === 1"></schedule> -->
			<view v-if="level !== '5'">

				<!-- 反馈信息区域 -->
				<view class="feedback-text" v-if="current === 0">
					<view class="head">
						{{appealInfo.now_organization_classify || '中台管理员'}} {{appealInfo.now_organization_name}} 提交诉求反馈：
					</view>
					<view class="content">
						{{appealInfo.appeal_reply}}
					</view>
					<view class="info">
						<text class="time">{{appealInfo.solvetime | formatDate}}</text>
						<text class="copy-btn" @click="copy">复制</text>
					</view>
				</view>
				<!-- 分割线 -->
				<view class="line" v-if="current === 0"></view>
				<view class="wrap" v-if="current === 0 && appealInfo.sh_status != 2">
					<view class="radio-wrap">
						<u-radio-group v-model="currentRadio" @change="radioGroupChange">
							<u-radio v-for="(item, index) in list" :key="index" :name="item.value"
								:disabled="item.disabled">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
					<!-- <view class="search" @click="toSearchPage">
						<u-search v-show="currentRadio === 1" disabled shape="round" height="50" placeholder="搜索相关诉求"
							:show-action="false"></u-search>
					</view> -->
				</view>
				<view class="input" v-if="current === 0 && level != 5 && currentRadio == 2">
					<u-input class="textarea-input" cursor-spacing="60" :custom-style="inputCustomStyle"
						v-model="remark" placeholder="请填写驳回情况说明" maxlength="10000" height="400" type="textarea"
						@input="inputChange" :clearable="false"></u-input>
					<view class="" v-if="currentRadio == 2">
						<view class="file-list">
							<view class="file-item" v-for="(item, index) in fileList" :key="item.url">
								<view class="name font-overflow" @click="previewFile(item.fullUrl)">
									{{item.fileName}}
								</view>
								<view class="delete-btn" @click="removeFile(index)">
									移除
								</view>
							</view>
						</view>
						<view v-if="fileList.length < 3">
							<lsj-upload ref="lsjUpload" width="100px" height="180rpx" childId="upload" :size="10"
								:option="optionConfig" v-model="percent" @input="onInput" @callback="onCallback">
								<view class="upload-btn" style="height: 180rpx;margin: 30rpx 0 30rpx 10rpx;">上传附件</view>
							</lsj-upload>
						</view>
					</view>
				</view>
				<!-- 按钮 -->
				<view class="btn-wrap" v-if="current === 0 && level != 5 && appealInfo.sh_status != 2">
					<view class="btn">
						<u-button @click="handleClick" :custom-style="customStyle2">
							提交
						</u-button>
					</view>
				</view>

			</view>
			<view v-if="level == 5 && current === 0">
				<comment :detail="appealInfo"></comment>
			</view>
			<view v-if="current === 1">
				<schedule :data="appealInfo.record"></schedule>
			</view>
		</view>
		<videoMax :isShowVideo='isShowVideo' :videoUrl='videoUrl' @colse='handlecolse'></videoMax>
	</view>
</template>

<script>
	import Comment from '@/pages/index/components/commont/Commont.vue'
	import Schedule from '@/pages/index/schedule/Schedule.vue'
	import TitleTools from '@/components/title-tools/TitleTools.vue'
	import {
		apiAppealRecord,
		apiGetAppealRecord,
		apiGetAppealByid
	} from '@/api/backlog/backlog.js'
	import {
		apiAppealApprove
	} from '@/api/audit/audit.js'
	import videoMax from "@/components/video_max/video_max.vue";
	import CONFIG from '@/config/config.js'
	import { dateFormats } from '@/utils/utils.js'
	export default {
		name: 'AuditDetail',
		components: {
			TitleTools,
			Schedule,
			Comment,
			videoMax
		},
		data() {
			return {
				baseUrl: getApp().globalData.baseUrl,
				//tabs标签栏数据
				tabList: [{
						name: '诉求反馈'
					},
					{
						name: '跟进记录'
					}
				],
				//tabs选中项下标
				current: 0,
				//反馈信息
				feedback: '',
				//备注信息
				remark: '',
				//交办按钮样式
				customStyle1: {
					fontSize: '40rpx',
					color: '#fff',
					backgroundColor: '#929292',
					borderRadius: '20rpx'
				},
				//提交反馈按钮样式
				customStyle2: {
					fontSize: '40rpx',
					color: '#fff',
					backgroundColor: '#196EFF',
					borderRadius: '20rpx'
				},
				//文本域样式
				inputCustomStyle: {
					// textIndent: '30rpx',
					paddingRight: '30rpx',
					overflowY: 'auto',
					borderRadius: '10rpx',
					backgroundColor: '#EAF1F9'
				},
				//单选框选中
				currentRadio: 1,
				//单选框数据
				list: [{
						name: '通过',
						value: 1,
						disabled: false
					},
					{
						name: '驳回',
						value: 2,
						disabled: false
					}
				],
				level: getApp().globalData.level,
				//代办事项id
				id: '',
				//代办事项详情
				appealInfo: {},
				optionConfig: {},
				percent: '',
				fileList: [

				],
				roleName: getApp().globalData.roleName,
				
				innerAudioContext:null,
				clearTime:null,   //定时器
				isShowVideo:false,
				videoUrl:'',
			}
		},
		onReady() {
			// 初始化参数并创建上传DOM
			this.optionConfig = {
				url: 'https://gxkfs.yoyosc.com.cn/api/common/upload', //替换为你的接口地址
				name: 'file', // 附件key
				size: 10, // 附件上传大小上限(M)，默认10M
				debug: true,
				//根据你接口需求自定义请求头
				header: {
					token: uni.getStorageSync('token')
				},
			};
		},
		onLoad(e){
			this.innerAudioContext = uni.createInnerAudioContext();
			this.baseUrl = CONFIG.baseUrl
		},
		onShow() {
			if (this.level == '5') {
				this.tabList[0].name = '评论'
			}
			this.id = this.$Route.query.id;
			console.log(this.id)
			//获取代办事项
			this.apiGetAppealByid().catch(err => {
				console.log(err)
			})
		},
		methods: {
			handleYuyinPaly(item){  // 语音播报
				let _this = this
				if(this.clearTime){
					clearTimeout(_this.clearTime)
				}
				
				if(_this.innerAudioContext){
					_this.innerAudioContext.autoplay = true;
					_this.innerAudioContext.src = _this.baseUrl + item.voice_file;
					_this.clearTime = setTimeout(()=>{
						_this.innerAudioContext.pause();
						_this.innerAudioContext.destroy()
						_this.innerAudioContext = null
						_this.appealInfo.flag = false
					},(item.voice_time - 0) * 1000)
				}else{
					_this.innerAudioContext = uni.createInnerAudioContext();
					_this.innerAudioContext.autoplay = true;
					_this.innerAudioContext.src = _this.baseUrl + item.voice_file;
					
					_this.clearTime = setTimeout(()=>{
						_this.innerAudioContext.pause();
						_this.innerAudioContext.destroy()
						_this.innerAudioContext = null
						_this.appealInfo.flag = false
					},(item.voice_time - 0) * 1000)
				}
				
				this.appealInfo.flag = !item.flag
			},
			handleImg(url){  // 查看图片
				uni.previewImage({
					urls:[url],
				})
			},
			handlecolse(){
				this.isShowVideo = false
			},
			handleVideo(url){  // 查看图片
				this.isShowVideo = true
				this.videoUrl = url
			},
			onInput(e) {
				console.log('上传进度', e);
			},
			onCallback(e) {
				const {
					data,
					code
				} = JSON.parse(e.responseText);
				
				if (code == 0) {
					uni.$u.toast('文件格式错误');
					return
				}
				
				const obj = {
					fileName: e.fileName,
					fullUrl: data.fullurl,
					url: data.url
				}
				//上传文件列表
				this.fileList.push(obj)
				console.log('上传结果', e);
			},
			//tabs标签选中改变时触发
			change(index) {
				this.current = index;
				if (index === 1) {
					//获取跟进记录
					this.apiGetAppealRecord();
				}
			},
			//反馈信息输入框输入触发
			inputChange() {

			},
			//点击搜索框跳转搜索页面
			toSearchPage() {
				this.$Router.push({
					name: 'search'
				})
			},
			//选中项
			radioCheck(current) {
				this.currentRadio = current;
			},
			//按钮点击
			async handleClick() {
				if (this.remark.trim().length === 0 && this.currentRadio === 2) {
					this.$u.toast('请填写内容')
					return
				}
				//执行通过逻辑
				if (this.currentRadio === 1) {
					await this.apiAppealApprove(2)
					uni.showToast({
						title: '审核通过',
						icon: 'success'
					})
					setTimeout(() => {
						this.$Router.back(1);
					}, 500)
					// wx.getSetting({
					// 	withSubscriptions: true, //是否同时获取用户订阅消息的订阅状态，默认不获取
					// 	success: (res) => {
					// 		console.log(res)
					// if (res.subscriptionsSetting && res.subscriptionsSetting.itemSettings &&
					// 	res.subscriptionsSetting.itemSettings[message] == "reject") {
					// 	//打开设置去设置
					// 	this.openConfirm('检测到您没打开推送权限，是否去设置打开？')
					// } else {
					// wx.requestSubscribeMessage({
					// 	tmplIds: ['42L5094gHJusEOnOYc3cRTGuC-cwq8AdFvu2PDW-o4s'],
					// 	success: (res) => {
					// 		const that = this;
					// 		uni.showModal({
					// 			content: '确认提交反馈？',
					// 			async success(res) {
					// 				if (res.confirm) {
					// 					await that.apiAppealRecord();
					// 					uni.showToast({
					// 						title: '反馈成功',
					// 						icon: 'success'
					// 					})
					// 					setTimeout(() => {
					// 						that.$Router.back(1);
					// 					}, 500)
					// 				}
					// 			}
					// 		})
					// 	},
					// 	fail: (res) => {
					// 		console.info(res)
					// 	},
					// })
					// }
					// 	},
					// 	fail: (err) => {
					// 		console.log(err)
					// 	}
					// })

				} else if (this.currentRadio === 2) {
					//执行驳回逻辑
					await this.apiAppealApprove(3);
					uni.showToast({
						title: '驳回成功',
						icon: 'success'
					})
					setTimeout(() => {
						this.$Router.back(1);
					}, 500)
					// this.$Router.push({
					// 	name: 'address_list',
					// 	params: {
					// 		info: JSON.stringify(this.appealInfo),
					// 		remark: this.remark
					// 	}
					// })
				}
			},
			//单选框选中改变时触发
			radioGroupChange(e) {
				this.remark = '';
				this.currentRadio = e;
				// console.log(e)
				// if (this.currentRadio == 2) {
				// 	this.remark = '请求协调或者处理';
				// }
			},
			//获取跟进记录
			async apiGetAppealRecord() {
				const res = await apiGetAppealRecord(this.id);
			},
			//获取代办事项详情
			async apiGetAppealByid() {
				const res = await apiGetAppealByid(this.id);
				console.log(res)
				let imageRegex = /\.(jpg|jpeg|png|gif)$/i;
				let videoRegex = /(mp4|avi|mov)/i;
				let arr = []
				let url = ''
				let type = ''
				if(res.data.material_files.length != 0){
					let zongArr = res.data.material_files.split(',')
					zongArr.map((vv,ii)=>{
						url = this.baseUrl +  vv
						if(imageRegex.test(vv)){
							type = 'img'
						}
						if(videoRegex.test(vv)){
							type = 'video'
						}
						arr.push({url,type})
					})
				}
				
				res.data.material_files = arr
				res.data.createtime = dateFormats(res.data.createtime * 1000,'Y-m-d H:i')
				res.data.flag = false
				res.data.record.pop()
				this.appealInfo = res.data;
				this.appealInfo.imgArr = this.setImgPath(this.appealInfo.material_files)
			},
			//处理图片路径
			setImgPath(str) {
				const arr = str.split(',');
				arr.forEach((item, index) => {
					arr[index] = this.baseUrl + item;
				})
				return arr;
			},
			//审批
			async apiAppealApprove(status) {
				const file_names = [];
				const extra_link = [];
				this.fileList.forEach(item => {
					file_names.push(item.fileName);
					extra_link.push(item.url);
				})
				const organization_classify_id = getApp().globalData.organization_classify_id;
				const res = await apiAppealApprove(this.id, this.appealInfo.organization_id, file_names.join(','),
					extra_link.join(','), this.remark, status, organization_classify_id);
			},
			//交办事项
			// async apiAppealRecord() {
			// 	const extra_link = []
			// 	const file_names = []
			// 	this.fileList.forEach(item => {
			// 		extra_link.push(item.url);
			// 		file_names.push(item.fileName);
			// 	})

			// 	const res = await apiAppealRecord(this.id, 0, 2, this.remark, extra_link.join(','), file_names.join(
			// 		','));
			// },
			//图片预览
			previewImage(src) {
				wx.previewImage({
					current: src, // 当前显示图片的http链接
					urls: this.appealInfo.imgArr // 需要预览的图片http链接列表
				})
			},
			//订阅消息
			handleMessage() {

			},
			//移除附件
			removeFile(index) {
				this.fileList.splice(index, 1);
			},
			previewFile(url) {
				this.$refs.lFile.download({
						url
					})
					.then(path => {
						/* 打开附件 */
						this.$refs.lFile.open(path);
					});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.backlog-declare-detail {
		padding: 10rpx 20rpx;
	}

	.bg-image {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
	}

	//代办事项内容样式
	.item1 {
		padding: 30rpx;
		width: 710rpx;
		min-height: 482rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.content {
			margin-top: 30rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #000000;
		}

		.img-wrap {
			display: flex;
			margin-top: 30rpx;

			.img:not(:first-child) {
				margin-left: 20rpx;
			}
		}
	}
.card{
		padding: 24rpx;
		background: #fff;
		margin-bottom: 24rpx;
		border-radius: 20rpx;
		.tip{
			padding: 2rpx 4rpx;
			border-radius: 8rpx;
			border: 1rpx solid #FF7D04;
			color: #FF7D04;
			font-size: 24rpx;
		}
		.yuyinBox{
			padding: 16rpx 24rpx;
			border-radius: 34rpx;
			background: #2979ff;
			color:#fff;
		}
		.aiBut_act{
			padding: 12rpx 40rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #fff;
			border-radius: 36rpx;
			background: #196EFF;
		}
		.aiBut_not{
			padding: 12rpx 40rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #fff;
			border-radius: 36rpx;
			background: #ccc;
		}
		.line{
			width: 100%;
			height: 1rpx;
			background: rgba(0, 0, 0, .15);
		}
		.steps{
			padding: 12rpx 24rpx;
			position: relative;
			&::after{
				content: '';
				width: 1rpx;
				height: 100%;
				background: rgba(0,0,0,.4);
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
			}
			&::before{
				content: '';
				width: 20rpx;
				height: 20rpx;
				border: 1rpx solid rgba(0,0,0,.4);
				border-radius: 12rpx;
				background:  #fff;
				position: absolute;
				left: -11rpx;
				top: 0;
				z-index: 4;
			}
		}
		.steps_act{
			padding: 12rpx 24rpx;
			position: relative;
			&::after{
				content: '';
				width: 1rpx;
				height: 100%;
				background: #2979ff;;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
			}
			&::before{
				content: '';
				width: 20rpx;
				height: 20rpx;
				border-radius: 12rpx;
				border: 1rpx solid #2979ff;;
				background:  #2979ff;
				position: absolute;
				left: -11rpx;
				top: 0;
				z-index: 4;
			}
		}
	}
	// 表单区域内容样式
	.box {
		padding-bottom: 20rpx;
		margin-top: 30rpx;
		width: 710rpx;
		// height: 1080rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.line {
			width: 710rpx;
			height: 1px;
			background: #E5E5E5;
			overflow: hidden;
		}

		// .title-tools {
		// 	padding: 20rpx 30rpx;

		// 	.search {
		// 		margin-top: -8rpx;
		// 	}
		// }
	}

	//底部按钮样式
	.btn-group {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		margin-bottom: 20rpx;

		.btn {
			width: 345rpx;
			height: 80rpx;
		}
	}

	.wrap {
		display: flex;
		align-items: center;
		padding: 30rpx;
		margin-bottom: 10rpx;

		.radio-wrap {
			flex: 1;
			display: flex;
			justify-content: space-between;

			.radio {
				display: flex;
				align-items: center;

				text {
					margin-left: 21rpx;
				}

				&:nth-child(2) {
					margin-right: 80rpx;
				}
			}
		}

		.search {
			flex: 1;
		}
	}

	.input {
		padding: 0 20rpx;
		// margin-top: -30rpx;

		::v-deep.u-input {
			padding: 10rpx !important;
		}
	}

	.btn-wrap {
		margin-top: 50rpx;
	}

	::v-deep .textarea-input {
		margin-top: 30rpx;
		text-indent: 30rpx;
		overflow-y: auto;
		background-color: #EAF1F9 !important;
		border-radius: 10rpx;
	}

	.file-list {
		padding-left: 10rpx;

		.file-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 100rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-bottom: 1px solid #999;

			.name {
				width: 300rpx;
				color: #196EFF;
				text-decoration: underline;
			}

			.delete-btn {
				color: #196EFF;
				text-decoration: underline;
			}

			&:nth-last-child(1) {
				border: none;
			}
		}
	}

	.upload-btn {
		color: #196EFF;
		line-height: 180rpx;
		text-align: center;
		border-radius: 10rpx;
		background-color: #EAF1F9;
	}

	// 反馈信息区域样式
	.feedback-text {
		padding: 30rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		width: 630rpx;
		background: #EAF1F9;
		border-radius: 10rpx;

		.head {
			font-size: 30rpx;
			font-weight: 500;
			color: #000000;
		}

		.content {
			margin-top: 29rpx;
			font-size: 28rpx;
			color: #000000;
		}

		.info {
			margin-top: 28rpx;

			.time {
				font-size: 24rpx;
				color: #000000;
			}

			.copy-btn {
				margin-left: 30rpx;
				font-size: 24rpx;
				color: #196EFF;
			}
		}
	}

	.line {
		// margin: 0 -20rpx;
		margin-top: 41rpx;
		width: 710rpx;
		height: 1px;
		background: #E5E5E5;
	}
	.marbot24{
			margin-bottom: 24rpx;
		}
		.marbot16{
			margin-bottom: 16rpx;
		}
		.marbot12{
			margin-bottom: 12rpx;
		}
		.martop24{
			margin-top: 24rpx;
		}
		.martop16{
			margin-top: 16rpx;
		}
</style>
